<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性导航修复测试</title>

    <!-- 引入必要样式 -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/sticky-nav.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">

    <style>
        /* 测试用样式 */
        body {
            min-height: 200vh; /* 确保可以滚动 */
            font-family: Arial, sans-serif;
        }

        .test-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            border: 2px solid #ddd;
            margin: 20px 0;
        }

        .test-section:nth-child(1) { background: linear-gradient(45deg, #ffcccc, #ffdddd); }
        .test-section:nth-child(2) { background: linear-gradient(45deg, #ccffcc, #ddffdd); }
        .test-section:nth-child(3) { background: linear-gradient(45deg, #ccccff, #ddddff); }
        .test-section:nth-child(4) { background: linear-gradient(45deg, #ffffcc, #ffffdd); }
        .test-section:nth-child(5) { background: linear-gradient(45deg, #ffccff, #ffddff); }

        /* 模拟分类区域 */
        .category-section {
            padding: 80px 20px;
            min-height: 100vh;
        }

        .category-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .category-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 20px;
        }

        .instructions {
            background: #f0f8ff;
            padding: 20px;
            border-radius: 8px;
            margin: 20px;
            border-left: 4px solid #0396FF;
        }

        .instructions h3 {
            color: #0396FF;
            margin-top: 0;
        }

        .instructions ul {
            margin: 10px 0;
            padding-left: 20px;
        }

        .instructions li {
            margin: 8px 0;
        }

        .debug-info {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 12px;
            max-width: 300px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="instructions">
        <h3>🔧 粘性导航修复测试说明</h3>
        <p><strong>测试目标：</strong>验证粘性侧边导航栏的选中状态是否正常工作</p>

        <ul>
            <li><strong>问题1：</strong>点击粘性导航项时，选中状态闪烁不定</li>
            <li><strong>问题2：</strong>选中状态出现在错误的导航项上</li>
            <li><strong>问题3：</strong>选中状态不稳定，上下跳动</li>
        </ul>

        <p><strong>测试步骤：</strong></p>
        <ol>
            <li>等待粘性导航出现在右侧</li>
            <li>依次点击每个导航项</li>
            <li>观察选中状态是否正确显示在点击的项上</li>
            <li>滚动页面，观察选中状态是否跟随内容变化</li>
            <li>检查是否有闪烁或状态错误的情况</li>
        </ol>

        <p><strong>预期结果：</strong></p>
        <ul>
            <li>✅ 点击的导航项立即显示为激活状态</li>
            <li>✅ 激活状态稳定，不会闪烁或跳动</li>
            <li>✅ 滚动时激活状态准确跟随当前可见区域</li>
            <li>✅ 不会出现选中错误项的情况</li>
        </ul>
    </div>

    <!-- 模拟内容区域 -->
    <div class="category-section" data-category-id="1">
        <div class="category-header">
            <h2 class="category-title">分类 1 - 免版权图片</h2>
            <p>这是第一个分类区域，测试导航选中状态的准确性</p>
        </div>
        <div style="text-align: center; padding: 40px;">
            <i class="fas fa-images" style="font-size: 4rem; color: #0396FF;"></i>
            <p style="margin-top: 20px;">免版权图片资源区域</p>
        </div>
    </div>

    <div class="category-section" data-category-id="2">
        <div class="category-header">
            <h2 class="category-title">分类 2 - 免费字体</h2>
            <p>这是第二个分类区域</p>
        </div>
        <div style="text-align: center; padding: 40px;">
            <i class="fas fa-font" style="font-size: 4rem; color: #0396FF;"></i>
            <p style="margin-top: 20px;">免费字体资源区域</p>
        </div>
    </div>

    <div class="category-section" data-category-id="3">
        <div class="category-header">
            <h2 class="category-title">分类 3 - 免费图标</h2>
            <p>这是第三个分类区域</p>
        </div>
        <div style="text-align: center; padding: 40px;">
            <i class="fas fa-icons" style="font-size: 4rem; color: #0396FF;"></i>
            <p style="margin-top: 20px;">免费图标资源区域</p>
        </div>
    </div>

    <div class="category-section" data-category-id="4">
        <div class="category-header">
            <h2 class="category-title">分类 4 - 免费视频</h2>
            <p>这是第四个分类区域</p>
        </div>
        <div style="text-align: center; padding: 40px;">
            <i class="fas fa-video" style="font-size: 4rem; color: #0396FF;"></i>
            <p style="margin-top: 20px;">免费视频资源区域</p>
        </div>
    </div>

    <div class="category-section" data-category-id="5">
        <div class="category-header">
            <h2 class="category-title">分类 5 - 设计工具</h2>
            <p>这是第五个分类区域</p>
        </div>
        <div style="text-align: center; padding: 40px;">
            <i class="fas fa-tools" style="font-size: 4rem; color: #0396FF;"></i>
            <p style="margin-top: 20px;">设计工具资源区域</p>
        </div>
    </div>

    <!-- 调试信息显示 -->
    <div class="debug-info" id="debugInfo">
        <strong>调试信息：</strong><br>
        当前激活ID: <span id="currentActiveId">无</span><br>
        用户点击: <span id="userClick">否</span><br>
        滚动位置: <span id="scrollPosition">0</span>
    </div>

    <!-- 引入必要脚本 -->
    <script src="assets/js/sticky-nav.js"></script>
    <script src="assets/js/enhanced-interactions.js"></script>

    <script>
        // 调试脚本
        let debugInfo = {
            currentActiveId: '无',
            userClick: '否',
            scrollPosition: 0
        };

        function updateDebugInfo() {
            document.getElementById('currentActiveId').textContent = debugInfo.currentActiveId;
            document.getElementById('userClick').textContent = debugInfo.userClick;
            document.getElementById('scrollPosition').textContent = debugInfo.scrollPosition;
        }

        // 监听滚动事件
        window.addEventListener('scroll', () => {
            debugInfo.scrollPosition = Math.round(window.scrollY);
            updateDebugInfo();
        });

        // 监听粘性导航状态变化（如果可能）
        setInterval(() => {
            if (window.StickyNav && window.StickyNav.getState) {
                const state = window.StickyNav.getState();
                debugInfo.currentActiveId = state.currentActiveId || '无';
                debugInfo.userClick = state.isUserClick ? '是' : '否';
                updateDebugInfo();
            }
        }, 100);

        // 初始化调试信息
        updateDebugInfo();

        console.log('🧪 粘性导航修复测试页面已加载');
        console.log('📍 请测试以下功能：');
        console.log('1. 点击右侧粘性导航的各项');
        console.log('2. 观察选中状态是否正确');
        console.log('3. 滚动页面观察状态变化');
        console.log('4. 检查是否有闪烁或错误状态');
    </script>
</body>
</html>